<template>
  <div id="outerchoose">
    <el-steps :active=2 simple style="margin-bottom: 20px">
      <el-step title="简介" icon="el-icon-info"></el-step>
      <el-step title="上传" icon="el-icon-upload2"></el-step>
      <el-step title="调整" icon="el-icon-setting"></el-step>
      <el-step title="结果" icon="el-icon-finished"></el-step>
    </el-steps>
    参考模型标签选择
    <el-table
      :data="referenceData"
      border
      style="width: 100%">
      <el-table-column v-for="(data,index) in referenceData[0]" :prop="index" :key="index">
        <template slot="header" slot-scope="scope">
          <el-switch
            v-model="isUse[index]"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <el-radio v-model="radioReference" :label="index" @change="radioChange">label？</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    结果标签选择
    <el-table
      :data="resultData"
      border
      style="width: 100%">
      <el-table-column v-for="(data,index) in resultData[0]" :prop="index" :key="index">
        <template slot="header" slot-scope="scope">
          <el-radio v-model="radioResult" :label="index" @change="radioChange">label？</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="submit">计算内部指标</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OuterChoose",
  data() {
    return {
      isUse: {
        c0: true,
        c1: true,
        c2: true,
        c3: true,
        c4: true,
        c5: true,
        c6: true,
        c7: true,
        c8: true,
        c9: true,
        c10: true,
        c11: true,
        c12: true,
        c13: true,
        c14: true,
        c15: true,
        c16: true,
        c17: true,
        c18: true,
        c19: true
      },
      referenceData: [],
      resultData: [],
      use: [],
      radioReference: "",
      radioResult: ""
    }
  },
  methods: {
    radioChange() {
      for (let useKey in this.isUse) {
        this.isUse[useKey] = true
      }
      this.isUse[this.radioReference] = false
    },
    submit() {
      var hasChar = false;
      for (let key in this.referenceData[0]) {
        if (this.isUse[key]) {
          if (this.referenceData[0][key][0] > '9' || this.referenceData[0][key][0] < '0') {
            hasChar = true;
          }
          this.use.push(key)
        }
      }
      if (this.use.length == 0) {
        this.$notify({
          title: '没有参与聚类的数据',
          message: "至少选择一列数据",
          type: "error"
        })
      } else if (hasChar) {
        this.$notify({
          title: '存在离散型数据',
          message: "目前仅支持连续性数据",
          type: "warning"
        })
      } else if (this.radioReference == "" || this.radioResult == "") {
        this.$notify({
          title: '没有设置聚类的标签',
          message: "点击表格上方单选框",
          type: "error"
        })
      } else {
        this.use.push(this.radioReference)
        var that = this
        axios.post("http://localhost:8080/out/referencecolumns?cols=" + this.use).then(
          function (response) {
            axios.post("http://localhost:8080/out/resultcolumn?col=" + that.radioResult).then(
              function (response) {
                location.replace("#/outer/do")
              }, function (err) {
              })
          }, function (err) {
          })
      }
    }
  },
  mounted() {
    var that = this;
    axios.post("http://localhost:8080/out/previewreference").then(
      function (response) {
        that.referenceData = response.data;
      }, function (err) {
      })
    axios.post("http://localhost:8080/out/previewresult").then(
      function (response) {
        that.resultData = response.data;
      }, function (err) {
      })
  }
}
</script>

<style scoped>

</style>
